<route lang="jsonc" type="page">
    {
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": ""
		}
    }
</route>

<script lang="ts" setup>
	import { useSafeAreaInsets } from '@/mixins/basic'
	import FabServices from '@/pages/components/services.vue'
	import { useOrder } from '@/store/order'
	import { useUserStore } from '@/store/user'
	import HeaderNavbar from '@/pages/components/header-navbar.vue'
	import { ref } from 'vue'
	
	const userStore = useUserStore()
	const orderStore = useOrder()

	defineOptions({
		name: 'Details',
		options: {
			styleIsolation: 'shared'
		}
	})
	
	const { safeAreaInsets } = useSafeAreaInsets()
	const details = ref({
		banner: '',
		price: 0,
		home_name: '',
		detail: ''
	})
	onLoad(() => {
		uni.$on('details', (data) => {
			details.value = data
		})
	})
	
	const getToken = computed(() => {
		return uni.getStorageSync('token')
	})
	
	function handleBack() {
		uni.navigateBack({})
	}
	
	// 跳转下单页
	function handleOrder(res?: any) {
		console.log('getToken', getToken)
		// 登录操作
		if (res?.code) {
			userStore.handleLogin(res)
		}
		
		setProductInfo()
	}
	
	function setProductInfo() {
		orderStore.setOrderInfo(details.value)
		
		uni.navigateTo({
			url: '/pages-sub/order/info'
		})
	}
</script>

<template>
	<view class="details-page" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
		<!-- <wd-navbar title="" fixed left-arrow safeAreaInsetTop :bordered='false' @click-left="handleBack"></wd-navbar> -->
		<header-navbar title="" round bg-color="rgba(255,255,255,0)" />

		<!-- <image class="product-img" src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg" mode="widthFix" /> -->
		<wd-img custom-class="product-img" mode="widthFix" :src="details.banner">
			<template #error>
			  <view class="error-wrap">加载失败</view>
			</template>
			<template #loading>
			  <view class="loading-wrap">
				<wd-loading />
			  </view>
			</template>
		</wd-img>
		
		<view class="service-info">
			<view class="price">￥{{details.price}}</view>
			<view class="name">{{ details.home_name }}</view>
		</view>
		
		<view class="detail">
			<wd-img custom-class="detail-img" mode="widthFix" :src="details.detail">
				<template #error>
				  <view class="error-wrap">加载失败</view>
				</template>
				<template #loading>
				  <view class="loading-wrap">
					<wd-loading />
				  </view>
				</template>
			</wd-img>
		</view>
		<!-- 客服按钮 -->
		<FabServices bottom="118" />
		
		<view class="fixed-btn" :style="{ paddingBottom: safeAreaInsets?.bottom > 0 ? `${safeAreaInsets?.bottom}px` : null }">
			<view v-if="getToken" class="btn-order" @click="handleOrder">立即下单</view>
			<wd-button v-else type="text" open-type="getPhoneNumber" custom-class="btn-order" @getphonenumber="handleOrder">立即下单</wd-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.details-page {
		background-color: #FCFEFF;
		:deep(.product-img) {
			// #ifdef MP-WEIXIN
			// padding-top: 44px;
			// #endif
			width: 100%;
			background: linear-gradient(180.00deg, rgba(247, 192, 153, 1),rgba(247, 192, 153, 0) 100%);
		}
		
		.error-wrap, .loading-wrap {
			background-color: rgba(#989898, 0.4);
			color: #fff;
			min-height: 180px;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.service-info {
			padding: 16px 14px;
			.price {
				font-size: 24px;
				font-weight: 600;
				line-height: 24px;
				color: $uni-main-color;
			}
			.name {
				padding-top: 8px;
				font-size: 18px;
				font-weight: 600;
				line-height: 22px;
				color: #000;
			}
		}
		
		.detail {
			padding-top: 14px;
			padding-bottom: 95px;
			:deep(.detail-img) {
				width: 100%;
			}
		}
		
		.fixed-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			box-shadow: -1px 4px 16px 0px rgba(0, 0, 0, 0.14);
			background-color: #fff;
			padding: 15px 26px;
			:deep(.btn-order) {
				background-color: $uni-main-color;
				border-radius: 8px !important;
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: #fff;
				font-size: 18px;
				font-weight: 600;
				&:active {
					background-color: rgba($uni-main-color, 0.9)
				}
			}
		}
	}
</style>
